<template>
  <div>
    <!-- 详情页头部 -->
    <common-head title="商品详情页" />
    <div class="content" v-if="detail">
      <!-- 商品基本信息 -->
      <div class="item-card">
        <van-swipe
        class="my-swipe item-card-head"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item
          v-for="banner in detail.pics"
          :key="banner.id"
        >
        <img :src="banner.pic" alt="">
        </van-swipe-item>
        </van-swipe>
        <div class="item-card item-card-body">
          <p class="detail-name">{{detail.basicInfo.name}}</p>
          <div class="item-price">
            <span class="current-price">限时价{{ detail.basicInfo.minPrice | currency }} </span>
            <span class="original-price">原价{{ detail.basicInfo.originalPrice | currency }}</span>
          </div>
        </div>
      </div>
      <p class="ensure">
        <span>正品保证</span>
      </p>
      <div class="hint">
        <h3>温馨提示</h3>
        <p class="til-content">
          {{detail.basicInfo.purchaseNotes}}
        </p>
      </div>
      <hr/>
      <!-- 商品规格 -->
      <div class="richText" v-html="content"></div>
    </div>
    <!-- 底部商品导航卡片 -->
    <van-popup v-if="sku.basicInfo && sku.pics" class="itemNav-card" closeable v-model="show" position="bottom" :style="{ height: '40%' }" >
      <van-card
        :num="sku.num"
        :price="sku.basicInfo.minPrice*value"
        :title="sku.basicInfo.name"
        :thumb="sku.pics.pic"
      >
        <template #footer>
          <van-stepper v-model="sku.num" integer />
        </template>
      </van-card>
      <van-button type="danger" icon-position="right">点击加入购物车 </van-button>
    </van-popup>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" text="主页" color="#07c160" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button type="warning" @click="showSku(1)" text="加入购物车" />
      <van-goods-action-button type="danger" @click="showSku(0)" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { currency } from 'utils/filters'
import CommonHead from 'components/CommonHead'
import { fetchItem } from 'api'
export default {
  data () {
    return {
      detail: {
        basicInfo: {},
        content: '',
        pics: []
      },
      show: false,
      sku: {
        num: 1, // 默认购买数量为最低1
        checked: true // 默认在购物车中状态为选中
      },
      addCartOrshopNow: 1 // 1代表加入购物车，0代表立即购买
    }
  },
  created () {
    this.fetchItem()
  },
  methods: {
    // 展示商品规格
    showSku () {
      if (this.addCartOrshopNow === 1) {
        // alert('11111')
        this.$router.go('/cart')
      } else {
        alert('立即购买')
      }
    },
    // 获取商品详情页数据
    fetchItem () {
      fetchItem({ id: this.$route.params.itemId }).then((res) => {
        // console.log(res)
        if (res.data.code === 0) {
          this.detail = res.data.data
          // console.log(this.detail)
          this.sku = {
            // 商品规格数据  浅克隆
            ...this.sku,
            ...res.data.data.basicInfo
          }
        }
      })
    }
  },
  components: {
    CommonHead
  },
  computed: {
    // 正则匹配文本 处理富文本中图片的间隙
    content () {
      return this.detail.content.replace(
        /<img/g,
        '<img style="vertical-align:bottom;width:96%;margin: 0 5px"'
      )
    }
  },
  filters: {
    currency
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin-top: 50px;
  margin-bottom: 50px;
  .my-swiper{
   /deep/img{
      width: 100%;
    }
  }
  .item-card-body{
    padding-left: 20px;
    margin-bottom: 5px;
    p{
      font-size: 18px;
      margin-bottom: 10px;
    }
    /deep/.current-price{
      color: cyan;
      font-size: 16px;
      margin-right: 10px;
    }
    .original-price{
      color: #aaa;
      font-size: 16px;
    }
  }
  .ensure{
    color: #58D4FF;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    background: #e5f8ff;
    span{
      margin-left: 20px;
    }
  }
  .hint{
    padding: 0 20px;
    margin: 0 0 10px;
    .til-content{
      color: #666;
      font-size: 12px;
      text-indent: 2em;
    }
  }
}
.van-goods-action{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
}
.van-popup{
  padding-top: 20px;
  background:#f3bbf8;
  .van-card{
    font-size: 16px;
    height: 80%;
    background: #f3bbf8;
    .van-card__header{
      margin-bottom: 10px
    }
   /deep/ .van-image{
     width: 90%;
    }
  }
  /deep/.van-popup__close-icon{
    color: #666;
  }
  .van-button{
    width: 100%;
  }
}
</style>
